<template>
  <div class="layout" :style="{background:'none'}">
    <Layout :style="{background:'none'}">
      <Header :style="{padding:'0'}">
        <div class="layout-logo"></div>
        <span class="layout-title">石家庄交管局审验后台管理系统</span>
      </Header>
      <Content :style="{background:'#e0e0e0',width:'1200px', margin:'0 auto',padding:'10% 0 10% 0'}">
        <div class="banner"></div>
        <Card :bordered="true" class="loginMain">
          <template slot="title">
            <Icon type="md-contact" size="30"/>
            <span style="font-size: 20px">登陆</span>
          </template>
          <!--<Input type="text" prefix="ios-contact" placeholder="请输入用户名" clearable v-model="username" autofocus></Input>
          <Input type="password" prefix="md-key" placeholder="请输入密码" clearable v-model="password"></Input>
          <Input type="text" class="yzCode" prefix="md-image" placeholder="请输入验证码" clearable  v-model="code"></Input>
          <img :src="codeimg" @click="reloadImg()" class="codeImg"/>
          <div style="background: #008de1;display: inline-block"></div>
          <Button type="primary" icon="md-log-in" :style="{width:'100%',fontSize:'20px'}" @click="login()">登陆</Button>
          <span class="errorText" v-if="errMsg!=''">{{errMsg}}</span>-->
          <Form ref="form" :model="user" :rules="userVali">
            <FormItem prop="loginid">
              <Input type="text" v-model="user.loginid" placeholder="请输入账户" clearable autofocus>
                <Icon type="ios-contact" size="18" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="user.password" placeholder="请输入密码">
                <Icon type="md-key" size="18" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="kaptcha">
              <Input type="text" class="yzCode" placeholder="请输入验证码" clearable v-model="user.kaptcha">
                <Icon type="md-image" size="18" slot="prepend"></Icon>
              </Input>
              <img :src="codeimg" @click="reloadImg()" class="codeImg"/>
            </FormItem>
            <FormItem>
              <Button type="primary" :icon="subIcon" :style="{width:'100%',fontSize:'20px'}" @click="login()" :loading="isSubmit">{{submit}}</Button>
            </FormItem>
            <!--<span class="errorText" v-if="errMsg!=''">{{errMsg}}</span>-->
            <Alert :type="loginType" show-icon closable v-if="errMsg!=''">{{errMsg}}</Alert>
          </Form>
        </Card>
      </Content>
    </Layout>
  </div>
</template>

<script>
  import con from '@/const';
  export default {
    name: "login",
    data() {
      return {
        user: {
          loginid: '',
          password: '',
          kaptcha: ''
        },
        userVali:{
          loginid:[{required: true,message: '账户不能为空', trigger: 'blur'}],
          password:[{required: true,message: '密码不能为空', trigger: 'blur'}],
          kaptcha:[
            {required: true,message: '验证码不能为空', trigger: 'blur'},
            {type: 'string', min: 4,max:4, message: '验证码必须是4位', trigger: 'blur'}]
        },
        submit:'登陆',
        isSubmit:false,
        subIcon:'md-log-in',
        loginType:'',
        errMsg: '',
        codeimg: con.proxyPath + 'kaptcha/render',
      }
    },
    methods: {
      login() {
        if (this.isSubmit){
          return;
        }
        this.isSubmit=true;
        /*console.log(this.username, this.password, this.code);
        this.errMsg = '用户名不存在，请检查后在登陆';*/
        //this.$store.dispatch('loginUser',this.user).then().catch();
        //axios.post("/ajaxLogin",this.user).then((resp)=>{console.log(resp)}).catch(err=>console.log(err))
        this.$refs['form'].validate((valid) => {
          if (valid) {
            console.log("验证成功");
            let val=setInterval(()=>{
              if (this.submit.length>=5){
                this.submit='登陆';
                return;
              }
              this.submit+='.';
            },500);
            this.$store.dispatch("loginUser",this.user).then(()=>{
              this.loginSuccess(val);
            }).catch(err=>{
              this.loginErr(val,err);
            });
          } else {
            this.isSubmit=false;
            console.log("验证失败");
          }
        })
      },
      loginSuccess(val,success='登陆成功'){//登陆成功
        this.isSubmit=false;
        window.clearInterval(val);
        this.subIcon="md-checkmark-circle-outline";
        this.loginType='success';
        this.errMsg=success;
        /*this.$router.options.routes[1].children={path:'table',name:'table',component:resolve => require(['./table.vue'], resolve)};
        console.log(this.$router.options.routes[1]);*/
        //this.$router.addRoutes([{path:'/my',component:resolve => require(['../page/my.vue'], resolve),children:[{}]}]);
        this.$router.push("/my");
      },
      loginErr(val,err='登陆失败'){//登陆失败
        console.log(err);
        this.isSubmit=false;
        window.clearInterval(val);
        this.subIcon="md-close-circle";
        this.loginType='error';
        this.errMsg=err;
        this.reloadImg();
      },
      reloadImg() {
        this.codeimg = con.proxyPath + 'kaptcha/render?now=' + new Date().getTime();
      }
    }
  }
</script>

<style lang="less">
  body {
    background: #e0e0e0
  }
</style>
